<template>
<div class="orderList">
	<navSimple @goBack="closeOrderList()"></navSimple>
<div class="orderListCon" v-for="order in resData.list" @click="showDetail(order.orderNo) " v-show="showList(order.status)">
	<div class="orderNumber">
			  订单编号: <span > {{order.orderNo}}</span>
			
		</div>
	<div class="status">
			
		<div class="describe">
			<div class="check">
				状态: <span> {{order.statusDesc}}</span>
			</div>
			<div class="price">
				总价: <span> {{order.payment}}</span>元
			</div>

		</div>
		<div class="button" v-show="order.status === 10 ">
			<div class="gocheck" @click.stop="goCheckOut(order.orderNo)" >
				支付
			</div>
			<div class="cancleOrder"  @click.stop="goCancel(order.orderNo)" >
				取消
			</div>
		</div>
	</div>
	<div class="itemBox" >
		<div class="itemDe" v-for="item in order.orderItemVoList">
			<div class="picCon">
				<img :src="order.imageHost+item.productImage" >
			</div>
			<div class="titleCon">
				{{item.productName}}
			</div>
		</div>
	</div>
</div>
<div class="orderDetailCon" v-show="showListDetail">
		<div class="detailStatus">
			<div class="orderStatus">
				<span>订单状态:{{orderDetailData.statusDesc}}</span>
				<span>订单编号:{{orderDetailData.orderNo}}</span>
				<span>
					创建时间:{{orderDetailData.createTime}}
				</span>
			</div>
		
			<div class="clickButton">
				<div class="detailCancelOrder">
					取消订单
				</div>
				<div class="detailGoCheck">
					取消订单
				</div>
			</div>
		</div>
		<div class="pathDetail">
			<div class="receiverName">
				收货人:{{orderDetailData.shippingVo.receiverName}}
			</div>
			<div class="receiverPhone">
				电话: <span>{{orderDetailData.shippingVo.receiverPhone}}</span><br/>
				 {{orderDetailData.shippingVo.receiverMobile}}

			</div>
			<div class="receiverAdd">
				收货人:{{orderDetailData.shippingVo.receiverProvince}}{{orderDetailData.shippingVo.receiverCity}}{{orderDetailData.shippingVo.receiverDistrict}}{{orderDetailData.shippingVo.receiverAddress}}
			</div>
			
		</div>
		<div class="numList" >
			<div class="detailItemCon" v-for="item in orderDetailData.orderItemVoList">
				<div class="itemPicCon">
					<img class="itemPic" :src="orderDetailData.imageHost+item.productImage" >
				</div>
				<div class="nameCon">
				
						{{item.productName}}
					
				</div>
				<div class="PriceAndNum">
					<span class="price">
						{{item.currentUnitPrice}}
					</span>
					<span class="Num">
						*{{item.quantity}}
					</span>
				</div>
			</div>
			<div class="totalPrice">
				总价:<span class="detailPayment">
					{{orderDetailData.payment}}
				</span>
			</div>
		</div>
		<div class="closeListDetail" @click="closeListDetail">
			返回
		</div>
</div>	
</div>

</template>

<script>
 import 'common/css/reset.css';
import navSimple from"components/units/navSimple.vue";

var _order=require("common/util/server/order.js");
var _mm=require("common/util/mm.js");
export default {

  name: 'orderList',
  props:{
  	message:String,
  },
  methods:{
  	closeOrderList(){
  		this.$emit("closeevent");
  	},
  	closeListDetail(){
  		this.showListDetail=false;
  	},
  	showList(status){

  		if(this.message === "/unpayed"){
  			if (status === 10) {
  				return true
  			}else {return false}
  		}
  		if (this.message === "/allOrder") {
  			return true
  		}
  	},
  	goCancel(orderNo){
  		var _this=this;
  		_order.cancelOrder(orderNo,function(res){
  			window.alert(删除成功);
  			
  		_order.loadDetailList({pageNum:1,pageSize:10},
  		function(res){
  			_this.resData=res.data;
  		},function(err){
  			window.history.back();
  		});

  		},function(err){
  			window.alert(err.data.msg);
  		})
  	},
  	goCheckOut(orderNo){
  		window.location.href="/buy.html#/payment/"+orderNo;
  	},
  	showDetail(orderNo){
  		this.showListDetail="true";
  		var _this=this;
  		_order.getOrderDetail({orderNo:orderNo},
  			function(res){
  				_this.orderDetailData=res.data;
  					_this.showListDetail="true";
  			},function(err){
  				///MAYBE LATER

  			}
  			)

  	},
  },
  created(){
  	let _this=this;
  	_order.loadDetailList({pageNum:1,pageSize:10},
  		function(res){
  			_this.resData=res.data;
  		},function(err){
  			window.history.back();
  		});

  },
  components:{
  	navSimple
  },
  data () {
    return {
      resData:{},
      showListDetail:false,
     orderDetailData:{
     	shippingVo:{},

     },
    }
  },
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.orderList
	width:100%
	background:rgb(243,243,243)
	font-size:14px
	.orderListCon
		width:100%
		background:white
		margin-bottom:15px
		.orderNumber
			line-height:45px
			padding:0 10px
			box-sizing:border-box
			border-bottom:.5px solid #bfbfbf
			color:#999
		span
			color:#333
		.status
			padding:0 10px
			box-sizing:border-box
			border-bottom:.5px solid #bfbfbf
			.describe
				line-height:30px
				color:#333
				span
					color:rgb(222,64,43)
					font-weight:700
					size:16px
			.button
				margin:0 auto
				width:70%
				height:40px
				text-align:center
				line-height:30px
				.gocheck
					height:30px
					width:70px
					display:inline-block
					background:rgb(222,64,43)
					color:white
					border-radius:3px
					font-weight:600
					font-size:18px
					margin-right:35px
				.cancleOrder
					height:30px
					width:70px
					display:inline-block
					background:#f3f3f3
					border-radius:3px
					font-weight:600
					font-size:18px
					border:1px solid #ddd
		.itemBox
			width:100%
			padding:0 10px
			box-sizing:border-box
			.itemDe
				height:95px
				padding:10px 0
				box-sizing:border-box
				display:flex
				border-bottom:1px solid #bfbfbf
				.picCon
					height:75px
					width:75px
					flex:0 0 75px
					img
						height:75px
						width:75px
				.titleCon
					flex:1
					text-overflow:ellipsis
					padding-left:10px
	.orderDetailCon
		width:100%
		height:100%
		position:fixed
		left:0
		top:0
		overflow:scroll
		z-index:1000
		background:rgb(243,243,243)
		.detailStatus
			width:100%
			box-sizing:border-box
			padding:10px
			background:white
			margin-bottom:20px
			.orderStatus
				line-height:30px
				span
					display:block	
			.clickButton
				margin:0 auto
				width:70%
				height:40px
				text-align:center
				line-height:30px
				.detailCancelOrder
					height:30px
					width:70px
					display:inline-block
					background:rgb(222,64,43)
					color:white
					border-radius:3px
					font-weight:600
					margin-right:35px
				.detailGoCheck
					height:30px
					width:70px
					display:inline-block
					background:#f3f3f3
					border-radius:3px
					font-weight:600
					border:1px solid #ddd			
		.pathDetail
			width:100%
			box-sizing:border-box
			padding:10px
			background:white
			margin-bottom:20px
			line-height:30px
		.numList
			width:100%
			box-sizing:border-box
			padding:10px
			background:white
			margin-bottom:20px
			.detailItemCon
				display:flex
				border-bottom:.5px solid #bfbfbf
				padding:10px 0;
				.PriceAndNum
					flex:0 0 50px
					text-align:right
					padding-right:10px			
					.price
						color:rgb(222,64,43)
						font-weight:600
					span
						display:block
			.totalPrice
				line-height:30px
				text-align:right
				padding-right:10px
				.detailPayment
					font-size:20px
					color:rgb(222,64,43)
					font-weight:600
		.closeListDetail
			height:40px
			width:50%
			margin:0 auto
			line-height:40px
			text-align:center
			background:rgb(222,64,43)
			color:#fff
			font-size:20px
			
					
.itemPicCon{
	width:50px;
	height:50px;
	flex:0 0 50px;
}				    	
.itemPicCon .itemPic{
width:50px;
height:50px;
}	
.nameCon{	flex:1;
	
	text-overflow:ellipsis	;}
				 
			
</style>